{extend name="layout/layout" /}

{block name="content"}
<div class="layui-card">
    <div class="layui-card-header">
        <h3>价格统计分析</h3>
    </div>
    <div class="layui-card-body">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">总产品数</div>
                    <div class="layui-card-body">
                        <h2 class="layui-text-center">{$stats.total_products|default=0}</h2>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">平均价格</div>
                    <div class="layui-card-body">
                        <h2 class="layui-text-center">¥{$stats.avg_price|default=0}</h2>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">最高价格</div>
                    <div class="layui-card-body">
                        <h2 class="layui-text-center">¥{$stats.max_price|default=0}</h2>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">最低价格</div>
                    <div class="layui-card-body">
                        <h2 class="layui-text-center">¥{$stats.min_price|default=0}</h2>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="layui-row layui-col-space15" style="margin-top: 15px;">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">价格分布图</div>
                    <div class="layui-card-body">
                        <div id="price-distribution-chart" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">类别价格对比</div>
                    <div class="layui-card-body">
                        <div id="category-price-chart" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
layui.use(['element'], function(){
    var element = layui.element;
    
    // 这里可以添加图表初始化代码
    console.log('价格统计页面已加载');
});
</script>
{/block}